﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色管理</title>
	<link rel="stylesheet" href="__PUBLIC__/easyweb/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="__PUBLIC__/easyweb/assets/module/admin.css?v=318"/>
    <style>
        /* 左树 */
        #organizationTreeBar {
            padding: 10px 15px;
            border: 1px solid #e6e6e6;
            background-color: #f2f2f2;
        }

        #organizationTree {
            border: 1px solid #e6e6e6;
            border-top: none;
            padding: 10px 5px;
            overflow: auto;
            height: -webkit-calc(100vh - 125px);
            height: -moz-calc(100vh - 125px);
            height: calc(100vh - 125px);
        }

        .layui-tree-entry .layui-tree-txt {
            padding: 0 5px;
            border: 1px transparent solid;
            text-decoration: none !important;
        }

        .layui-tree-entry.ew-tree-click .layui-tree-txt {
            background-color: #fff3e0;
            border: 1px #FFE6B0 solid;
        }

        /* 右表搜索表单 */
        #organizationUserTbSearchForm .layui-form-label {
            box-sizing: border-box !important;
            width: 90px !important;
        }

        #organizationUserTbSearchForm .layui-input-block {
            margin-left: 90px !important;
        }
    </style>
</head>
<body>
<div class="layui-fluid" style="padding-bottom: 0;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <div class="layui-form toolbar" id="organizationTreeBar">
						角色分类
                    </div>
                    <div id="organizationTree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
					<table id="userTable" lay-filter="userTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="userTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs p_btn_edit" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs p_btn_delete" lay-event="del">删除</a>
</script>
<script type="text/html" id="userTbState">
    <input type="checkbox" lay-filter="userTbStateCk" value="{{d.userId}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.state==0?'正常':'锁定'}}</p>
</script>
<script type="text/html" id="userEditDialog">
    <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
        <input name="userId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">角色名称:</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入角色名称" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
            </div>
        </div>
		<div class="layui-form-item">
            <label class="layui-form-label layui-form-required">菜单权限:</label>
            <div class="layui-input-block">
                <ul id="roleAuthTree1" class="ztree"></ul>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/javascript" src="__PUBLIC__/easyweb/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/easyweb/assets/js/common.js?v=318"></script>
<script type="text/javascript" src="__PUBLIC__/easyweb/public.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'tree', 'dropdown', 'xmSelect', 'treeTable', 'zTree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var tree = layui.tree;
        var xmSelect = layui.xmSelect;
        var selObj, treeData;  
		var r_postcode = null;
        function renderTree() {
            $.get('{:U("Sys/role_list_left")}', function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].title = res.data[i].organizationName;
                    res.data[i].id = res.data[i].organizationId;
					if( res.data[i].level <=2){
						res.data[i].spread = true;
					} 
                }
                treeData = layui.treeTable.pidToChildren(res.data, 'organizationId', 'parentId');
                tree.render({
                    elem: '#organizationTree',
                    onlyIconControl: true,
                    data: treeData,
                    click: function (obj) {
                        selObj = obj;
                        $('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        insTb.reload({
                            where: {r_postcode: obj.data.r_postcode},
                            page: {curr: 1},
                            url: '{:U("Sys/role_list_right")}'
                        });
                    }
                });
                $('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
            });
        }
        renderTree();
        var insTb = table.render({
            elem: '#userTable',
            data: [],
            height: 'full-52',
            page: true,
			toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn p_btn_add"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn p_btn_delete"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {type: 'numbers'},
                {field: 'name', title: '角色名称', sort: true},
                {field: 'remark', title: '备注', sort: true},
				{field: 'create_by', title: '创建人', sort: true},
				{field: 'r_postcode', title: '当前区域', sort: true},
                {
                    field: 'createTime', title: '创建时间', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, sort: true
                },
                {field: 'state', title: '状态', templet: '#userTbState', sort: true, width: 100},
                {title: '操作', toolbar: '#userTbBar', align: 'center'}
            ]],
            done: function (res) {
				r_postcode = res.r_postcode;
				if( typeof(r_postcode) == "undefined"){
					$('.p_btn_add').hide();
					$('.p_btn_delete').hide();
				}else{
					admin_perms(res,"<?php echo $_GET['id']; ?>"); 
				}
            }
        });
        table.on('tool(userTable)', function (obj) {
            if (obj.event === 'edit') { 
                showEditModel(obj.data);
            } else if (obj.event === 'del') { 
                doDel(obj);
            } 
        });
        table.on('toolbar(userTable)', function (obj) {
            if (obj.event === 'add') { 
                showEditModel();
            } else if (obj.event === 'del') { 
                var checkRows = table.checkStatus('userTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.userId;
                });
                doDel({ids: ids});
            }
        });
        function showEditModel(mData) {
            admin.open({
                type: 1,
                title: (mData ? '修改' : '添加') + '角色',
                content: $('#userEditDialog').html(),
                success: function (layero, dIndex) {
				var menu_authIds = null;
				if (mData && mData.menu_authIds) {
					menu_authIds = mData.menu_authIds.split(',');
				}
					$.post('{:U("Sys/p_list2")}',{type:'menu',authIds:menu_authIds}, function (res) {
                        if (200 === res.code || "0" === res.code) {
                            $.fn.zTree.init($('#roleAuthTree1'), {
                                check: {enable: true},
                                data: {simpleData: {enable: true}},
                            }, res.data);
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                    form.val('userEditForm', mData);
                    form.on('submit(userEditSubmit)', function (data) {
					var insTree = $.fn.zTree.getZTreeObj('roleAuthTree1');
                    var checkedRows = insTree.getCheckedNodes(true);
                    var ids = [];
                    for (var i = 0; i < checkedRows.length; i++) {
                        ids.push(checkedRows[i].id);
                    }
					data.field.menu_authIds = ids.join(',');
                        var loadIndex = layer.load(2);
						$.post(mData ? '{:U("Sys/role_Edit")}' : '{:U("Sys/role_add")}',{data: data.field,r_postcode:r_postcode},function (res) { 
							layer.close(loadIndex);
                            if (res.code === 200) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
				$.post('{:U("Sys/p_Delete")}', {id: obj.data ? obj.data.userId : obj.ids,type:'role'}, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        form.on('switch(userTbStateCk)', function (obj) {
            var loadIndex = layer.load(2);
			$.post('{:U("Sys/role_state")}', {
                userId: obj.elem.value,
                state: obj.elem.checked ? 0 : 1,
				type:'role'
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 200) {
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        });

    });
</script>
</body>
</html>